<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>会员画册</title>
        <link rel="stylesheet" href="css/frozen.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="js/zepto.min.js"></script>
        <script src="js/lib/juicer-min.js"></script>
        <script src="js/frozen.js"></script>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/global.js"></script>
        <script src="js/jquery.jsonp.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script src="plugins/callActivity.js"></script>
        <script src="js/biz/huace/huace_huiyuanhuace.js"></script>
        <script src="js/jquery.fancybox.js "></script>
        <style>
            .w_tab_title li {
                width: 23.8%;
            }
            .dianzan{
                line-height: normal;
            }
        </style>
    </head>
    <body ontouchstart="">
        <header class="ui-header ui-header-positive ui-border-b">
            <i class="ui-icon-return" onclick="history.back()"></i>
            <h1>会员画册</h1>
            <i class="ui-icons-more" id="m_add"></i>
        </header>
        <!-- 下拉 -->
        <div class="w_cebiaoti">
            <div class="w_bga">
                <ul>
                    <li class="w_shac" onclick=""><a><img src="img/shoucang.png"><i class="sc">收藏</i></a></li>
                    <li class="w_fxx"><a><img src="img/fenxiang.png"><i>分享</i></a></li>
                    <li><a href="jubao.html"><img src="img/jubao.png"><i>举报</i></a></li>
                    <li class="w_none"><b><img src="img/m_top.png"></b></li>
                </ul>           
            </div>
        </div> 
        <div class="w_cs">
        	<div id="divbox" class="w_ysha">已收藏</div> 
        </div>
        <div class="w_fxaa">
        	<div class="w_fengx"></div>
        	<div class="w_fxbox">
            	<a href="#"><img src="img/qq.png"></a>
                <a href="#"><img src="img/weixin.png"></a>
                <a href="#"><img src="img/weibo.png"></a>
                <a href="#"><img src="img/pengyou.png"></a>
            </div>
        </div>
        <script type="text/javascript">
            //下拉
            $("#m_add").click(function(){
                $(".w_cebiaoti").slideToggle();
            });
			//消失
			function codefans(){ 
			var box=document.getElementById("divbox"); 
			box.style.display="none"; 
			} 
			setTimeout("codefans()",3000);//3秒 			
			Zepto(".w_cs").tap(function(){
                Zepto(".w_ysha").hide();
            });
			//收藏显示
//			Zepto(".w_shac").tap(function(){
//                Zepto(".w_ysha").show();
//            });
//			Zepto(".w_shac").tap(function(){
//                Zepto(".w_shac").hide();
//            });
			//分享
			Zepto(".w_fxx").tap(function(){
                //Zepto(".w_fxaa").show();
                shareUmeng("走青海","http://qzonestyle.gtimg.cn/qzone_v6/proj_connect_open/img/logo/logo_yinyuetai.png");
            });
			//Zepto(".w_fengx").tap(function(){
                //Zepto(".w_fxaa").hide();
            //});
        </script> 
        <section class="ui-container mb50">
            <div class="ui-user-follow ui-border-b clearfix">
                <div class="ui-user-follow-info clearfix">
                    <script type="text/juicer" id="huiyuan_tpl">
                    <div class="ui-user-avatar">
                        <img src="${user.photo}" width="55" height="55" alt="">
                    </div>
                    <div class="ui-user-intro">
                        <p>${user.nickName}
                        {@if user.sex===2 }
                        <span class="sex sex-female no-left">
                            <i class="icons-sex-female"></i>${user.age}</span>
                        {@else}
                        <span class="sex sex-male no-left">
                            <i class="icons-sex-male"></i>${user.age}</span>
                        {@/if}
                            </p>
                        <p>魅力值 :
                        {@if user.charisma===null||user.charisma==='' }
                            <span class="ui-txt-red">0</span>
                        {@else}
                            <span class="ui-txt-red">${user.charisma}</span>
                        {@/if}</p>
                        </div>
                    </script>
                </div>
                <div class="ui-user-follow-button text-align-right">
                    <a href="javascript:void(0); "class="edit">+关注</a> 
                    <!--点击关注-->
                    <!--<script language="javascript">-->
						<!--$(function(){-->
							<!--$(".edit").bind("click",function(){-->
								<!--var _txt=$(this).text();-->
								<!--if(_txt=="+关注"){-->
									<!--$(this).addClass("btn").text("已关注").css({'color':'#c5c5c5',width:'60px',height:'30px','padding':'0', 'border':'1px solid #c5c5c5'});-->
						<!-- -->
								<!--}-->
								<!--if(_txt=="已关注"){-->
								   <!--$(this).removeClass("btn").text("+关注");-->
								   <!--$(this).css({color:'#00a5e0', 'border':'1px solid #00a5e0'})-->
								<!--}-->
							<!--})-->
						<!--})-->
					<!--</script>-->
                </div>
            </div>            
            <div class="ma_tab">
                <ul class="w_tab_title clearfix">
                    <li class="ma_active">景点画册</li>
                    <li class="ma_look" onclick=""><span id="lookNumber"></span>人看过</li>
                    <li class="ma_comment" onclick="">评论<span id="commentSize"></span></li>
                    <li class="ui-tab-zan ui-border-b w_zys" id="zan-list" onclick="">
                        <div class="dianzan"><i class="icons-zana"><img src="img/icons_zan.png" class="wujiang_pic_size"onclick="" id="top_pic"></i><span id="greatNumber"></span>赞</div>
                        <!--赞-->
                        <!--<script>-->
                        <!--(function ($){-->
                            <!--$('.wujiang_pic_size').click(function(event) {-->
                                <!--/* Act on the event */-->
                                <!--if(this.getAttribute("src",2)=="img/icons_zan.png"){-->
                                <!--this.src="img/icons_zanh.png";-->
                                <!--}else{-->
                                <!--this.src="img/icons_zan.png";-->
                                <!--}-->
                            <!--});-->
                        <!--}(window.jQuery));-->
                        <!--</script>-->
                    </li>
                </ul>
                <div class="ma_con01">
                    <div class="wrapper">
                        <ul class="photo-list clearfix"></ul>
                    </div>
                </div>
                <div class="ma_con02">
                    <ul class="order-list"></ul>
                </div>
                <div class="ma_con03">
                	<ul class="comment-list"></ul>
                </div>
                <div class="ma_con04">
                    <ul class="order-list" id="bit_list"></ul>
                </div>
            </div>
            
        </section>
        <div class="album-bottom-menu">
            <ul class=" clearfix">
                <li class="ui-border-r"><a href="huace_xiedianping.html"><i class="album-bottom-menu-comment"></i>评论</a></li>
                <li class="ui-border-r" onclick="jumptoChating()"><i class="album-bottom-menu-chat"></i>聊天</li>
                <li class="ui-border-r">
                	<i class="w-menu-zan"><img src="img/album_bottom_menu_zan.png" class="wujiang_pic_sizea" onclick=""id="bottom_pic"></i>赞
                    <!--赞-->
                    <script>
                    (function ($){
                        $('.wujiang_pic_sizea').click(function(event) {
                            /* Act on the event */
                            if(this.getAttribute("src",2)=="img/album_bottom_menu_zan.png"){
                            this.src="img/album_bottom_menu_zans.png";
                            }else{
                            this.src="img/album_bottom_menu_zan.png";
                            }
                        });
                    }(window.jQuery));
                    </script>
                </li>
            </ul>
        </div>
        <script>
        // tab
        $(function () {
           $('.w_tab_title li').click(function(){
                //获得当前被点击的元素索引值
                var Index = $(this).index();
                //给菜单添加选择样式
                $(this).addClass('ma_active').siblings().removeClass('ma_active');
                //显示对应的div
                $('.ma_tab').children('div').eq(Index).show().siblings('div').hide();
           
           });
        });
        </script>
        <script type="text/juicer" id="photo_tpl">
        {@each photos as item, index}
         <li>
            <a class="fancy" href="${item}" data-fancybox-group="gallery">
                <img src="${item}"/>
            </a>
        </li>
        {@/each}
        </script>
        <script type="text/juicer" id="order_tpl">
        {@each arrays as item, index}
        <li>
            <div class="order-list-avatar">
                <img src="${item.photo}" alt="">
            </div>
            <div class="order-list-intro">
                <div class="order-list-intro-text">
                    <p class="color666 fz16">${item.nickName}</p>
                    <p class="color666 fz14">{@if item.sex===2 }
                        <span class="sex sex-female no-left">
                            <i class="icons-sex-female"></i>${item.age}</span>
                        {@else}
                        <span class="sex sex-male no-left">
                            <i class="icons-sex-male"></i>${item.age}</span>
                        {@/if}
                            </p>
                </div>
            </div>
        </li>
        {@/each}
        </script>
        <script type="text/juicer" id="comment_tpl">
        {@each arrays as item, index}
        <li class="ui-border-b">
            <div class="comment-list-avatar">
                <img src="img/order_list_pic.jpg" width="40" height="40" alt="">
            </div>
            <div class="comment-list-content">
                <div class="comment-list-content-text">
                    <div class="clearfix">
                        <div class="comment-list-content-user">
                           ${item.nickName}
                        {@if item.sex===2 }
                        <span class="sex sex-female no-left">
                            <i class="icons-sex-female"></i>${item.age}</span>
                        {@else}
                        <span class="sex sex-male no-left">
                            <i class="icons-sex-male"></i>${item.age}</span>
                        {@/if}
                        </div>
                        <div class="comment-list-content-time">
                            <p>${item.createTime}</p>
                        </div>
                    </div>
                    <p class="color666 fz12">${item.comment}</p>
                </div>
            </div>
        </li>
        {@/each}
        </script>
        <script type="text/juicer" id="bit_tpl">
        {@each arrays as item, index}
         <li>
            <div class="order-list-avatar">
                <img src="${item.photo}" alt="">
            </div>
            <div class="order-list-intro">
                <div class="order-list-intro-text">
                    <p class="color666 fz16">${item.nickName}</p>
                    <p class="color666 fz14">
                    {@if item.sex===2 }
                        <span class="sex sex-female no-left">
                            <i class="icons-sex-female"></i>
                            ${item.age}
                        </span>
                        {@else}
                        <span class="sex sex-male no-left">
                            <i class="icons-sex-male"></i>
                            ${item.age}
                        </span>
                        {@/if}
                    </p>
                </div>
            </div>
        </li>
        {@/each}
    </script>
    </body>
</html>
<!--缩略图样式-->
<script type="text/javascript">
    $(document).ready(function() {
        $('.fancy').fancybox();
        $('.fancybox-thumbs').fancybox({
            prevEffect : 'block',
            nextEffect : 'block',
            closeBtn  : false,
            arrows    : false,
            nextClick : true,
            helpers : {
                thumbs : {
                    width  : 50,
                    height : 50
                }
            }
        });
    });
</script>